<script setup lang="ts">
import { NButton } from 'naive-ui'

withDefaults(
  defineProps<{
    title?: string
    action?: boolean
    loading?: boolean
    titleStyle?: string
    submitText?: string
    closeText?: string
    submitVisible?: boolean
  }>(),
  {
    submitVisible: true
  }
)

const emit = defineEmits<{
  (event: 'close'): void
  (event: 'submit'): void
}>()

const handleClose = () => emit('close')
const handleSubmit = () => emit('submit')
</script>

<template>
  <div class="modal-card">
    <div
      v-if="title"
      class="modal-card__title"
      :style="titleStyle"
    >
      {{ title }}
    </div>
    <slot></slot>
    <div
      v-if="action"
      class="modal-card__action"
    >
      <NButton
        color="#999999"
        style="width: 100rem"
        ghost
        @click="handleClose"
      >
        {{ closeText || '取消' }}
      </NButton>
      <NButton
        v-if="submitVisible"
        type="primary"
        style="min-width: 100rem; margin-left: 10px"
        :loading="loading"
        @click="handleSubmit"
      >
        {{ submitText || '确定' }}
      </NButton>
    </div>
  </div>
</template>

<style scoped lang="scss">
.modal-card {
  min-width: 150rem;
  background: #e1e1e1;
  border-radius: 8rem;

  &__title {
    font-size: 22rem;
    padding: 36rem 44rem 0;
    line-height: 1;
  }

  &__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 16rem;
    padding: 26rem 52rem;
  }
}
</style>
